﻿<!DOCTYPE html>
<html lang="en">
<head>
	<title>涎涎个人简历2022年版</title>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="keywords" content="涎涎/>
	<!--mobile apps-->
	<!--Custom Theme files-->
    <!--这两不能删，表示title上的图标-->
	<link rel="shortcut icon" type="image/x-icon" href="images/your_ico.ico" >
	<link rel="icon" type="image/x-icon" href="images/your_ico.ico">
	<!--这两不能删，表示title上的图标-->
	<link rel="stylesheet" type="text/css"  media="all" href="css/bootstrap.css" >
	<link rel="stylesheet" type="text/css"  media="all" href="css/style.css">
	<link rel="stylesheet" href="css/swipebox.css">
	<!--//Custom Theme files-->
	<!--web-fonts-->
	<!--这两也不能删除，控制页面字体-->
	<link href='//fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
	<!--//web-fonts-->
</head>
<body>
	<!--banner-->
	<div id="home" class="banner">
		<div class="banner-info">
			<div class="container">
				<div class="col-md-4 header-left">
					<img src="images/me.jpg" alt="" class="cursor pe_img">
				</div>
				<div class="col-md-8 header-right">
					<h2>Hello World</h2>
					<h1>涎涎</h1>
					<h6>全栈工程师</h6>
					<ul class="address">
<!--						<li>-->
<!--							<ul class="address-text">-->
<!--								<li><b>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</b></li>-->
<!--								<li>汉</li>-->
<!--							</ul>-->
<!--						</li>-->
						<li>
							<ul class="address-text">
								<li><b>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</b></li>
								<li>985/211博士后</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</b></li>
								<li>计算机信息管理</li>
							</ul>
						</li>
<!--						<li>-->
<!--							<ul class="address-text">-->
<!--								<li><b>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</b></li>-->
<!--								<li>男</li>-->
<!--							</ul>-->
<!--						</li>-->
						<li>
							<ul class="address-text">
								<li><b>出生日期</b></li>
								<li>农历****-06-15</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>Github </b></li>
								<li><a href="https://github.com/yanbo0039" target="_blank">https://github.com/yanbo0039</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>Gitee </b></li>
								<li><a href="https://gitee.com/yanbo0039" target="_blank">https://gitee.com/yanbo0039</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>简书博客</b></li>
								<li><a href="https://www.jianshu.com/u/6aee7ae0e23a" target="_blank">https://www.jianshu.com/u/6aee7ae0e23a</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>CSDN</b></li>
								<li><a href="https://blog.csdn.net/qq_36079972" target="_blank">https://blog.csdn.net/qq_36079972</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>居住地址 </b></li>
								<li>广州市天河区</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>个人邮箱 </b></li>
								<li>511****69@qq.com</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>联系电话 </b></li>
								<li>177****1969/152****4216</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--top-nav-->
	<div class="top-nav wow">
		<div class="container">
			<div class="navbar-header logo">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					导航
				</button>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="menu">
					<ul class="nav navbar">
						<li><a href="#about" class="scroll">关于我</a></li>
						<li><a href="#work" class="scroll">个人经历</a></li>
						<li><a href="#education" class="scroll">教育背景</a></li>
						<li><a href="#skills" class="scroll">专业技能</a></li>
						<li><a href="#projects" class="scroll">部分作品</a></li>
						<li><a href="#contact" class="scroll">联系我</a></li>
					</ul>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!--//top-nav-->
	<!--about-->
	<div id="about" class="about">
		<div class="container">
			<h3 class="title"> 关于我</h3>
			<div class="col-md-8 about-left">
<!--				<p>-->
<!--					本人勤奋踏实，工作认真负责，自学能力强;性格开朗，容易与人相处，注重团队协作精神，且能承受较大压力;-->
<!--				</p>-->
				<p>
					1. 本人对技术充满好奇心，乐于学习，愿意分享;具备良好的服务意识，责任心，团队沟通和协作能力，发现并解决问题的能力;
				</p>
				<p>
					2. 有扎实的前端技术和计算机基础，包括但不限于HTML/CSS/JavaScript/DOM/Http/数据结构等;
				</p>
				<p>
					3. 精通至少一门MVVM框架，如AngularJS/Vue/React,使用React开发过大型项目或者复杂单页应用;
				</p>
				<p>
					4. 熟练掌握SVG/Canvas/WebGL等前端绘图技术及标准，至少使用过一个数据可视化类库，包括但不限于D3/G2/Three.js/Echarts/Highcharts.有一定的计算机图形学基础;
				</p>
				<p>
					5. 掌握服务端编程语言Java，并有实战经验，熟悉NodeJS/Python;
				</p>
				<p>
					6. 有过大数据产品(Hadoop/Hive/Spark等)相关开发经验;
				</p>
				<p>
					7. 有移动端开发经验并且有实际性能优化案例;
				</p>
				<p>
					8.有自己的技术产品，开源作品和活跃的开源社区贡献;
				</p>
			</div>
			<div class="col-md-4 about-right">
				<ul>
					<h5>荣誉证书</h5>
					<li><span class="glyphicon glyphicon-menu-right" ></span>NCAE<small>证书编号:NCAE19000000100666</small></li>
					<li><span class="glyphicon glyphicon-menu-right"></span>英语八级证书</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>计算机四级证书</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>教师资格证</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>普通话二甲证</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>室内设计资格证</li>
					<li><span class="glyphicon glyphicon-menu-right"></span><b>2020年图灵奖获得者</b></li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//about-->
	<!--work-experience-->
	<div id="work" class="work">
		<div class="container">
			<h3 class="title">个人经历</h3>
			<div class="work-info">
				<div class="col-md-6 work-left">
					<h4>2016 - 2019 </h4>
				</div>
				<div class="col-md-6 work-right">
					<h5><span class="glyphicon glyphicon-briefcase"> </span> 北京**科技有限公司</h5>
					<p>
						2016年4月，独自踏上了北漂的路程，机缘巧合下加入了北京**科技有限公司，公司业务主要是网络、
						运维、安全、流量，我在研发部门主要负责产品的前后端研发,因为是创业公司，所以加班是我们的日常。。。。。
<!--						下图就是我们研发小组大概凌晨一点的一次加餐，虽然很辛苦，但此刻大家都笑得那么开心，而我在大家都-->
<!--						面对镜头的那一瞬间却还沉浸在快餐盒里的美味无法自拔。。。。，详情请面聊。。-->
					</p>
<!--					<img src="images/xieruan.jpg" alt="" class="img-responsive mt_5 cursor pe_img">-->
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info">
				<div class="col-md-6 work-right work-right2">
					<h4>2013 - 2015 </h4>
				</div>
				<div class="col-md-6 work-left work-left2">
					<h5> 广州**智能科技有限公司 <span class="glyphicon glyphicon-briefcase"> </span></h5>
					<p> 2013年01月进入广州**智能科技有限公司，主要负责项目实施。
						帮助公司将公司项目布置运行在客户现场以及负责项目的bug解决和
						客户培训及客户对公司项目的反馈意见等。。。。
<!--						下图为公司年会时来自全国-->
<!--						驻各个城市点的同事一起玩游戏时所拍的照片，虽然我的工作大多数时候是孤单的一个人在省内-->
<!--						各个城市到处跑，但因为有这个活动的存在，更能感觉到自己并不是一个人在战斗。。。-->
					</p>
<!--					<img src="images/liqi.jpg" alt="" class="img-responsive mt_5 cursor pe_img">-->
				</div>
				<div class="clearfix"> </div>
			</div>
<!--			<div class="work-info">-->
<!--				<div class="col-md-6 work-left">-->
<!--					<h4>2012 - 2013 </h4>-->
<!--				</div>-->
<!--				<div class="col-md-6 work-right">-->
<!--					<h5><span class="glyphicon glyphicon-briefcase"> </span>成都***教育</h5>-->
<!--					<p>-->
<!--						2012年至2013期间在成都***教育参加了为期六个月的软件编程培训，-->
<!--						就读于百杰十六班，这段时间虽然短暂，但对我的人生影响是巨大的，-->
<!--						我终生以有此经历而荣。-->
<!--					</p>-->
<!--					<img src="images/bjtx.jpg" alt="" class="img-responsive mt_5 cursor pe_img">-->
<!--				</div>-->
<!--				<div class="clearfix"> </div>-->
<!--			</div>-->
<!--			<div class="work-info">-->
<!--				<div class="col-md-6 work-right work-right2">-->
<!--					<h4>2009 - 2012 </h4>-->
<!--				</div>-->
<!--				<div class="col-md-6 work-left work-left2">-->
<!--					<h5> 大学毕业 <span class="glyphicon glyphicon-briefcase"></span> </h5>-->
<!--					<p>2012年正式毕业离校，母校校训：厚德 博学 笃行 弘毅 八字真言已深深的烙在我的内心。 </p>-->
<!--					<img src="images/graduation.jpg" alt="" class="img-responsive mt_5 cursor pe_img">-->
<!--				</div>-->
<!--				<div class="clearfix"> </div>-->
<!--			</div>-->
		</div>
	</div>
	<!--//work-experience-->
	<!--education-->
	<div id="education" class="education">
		<div class="container">
			<h3 class="title">教育背景</h3>
			<div class="work-info">
				<div class="col-md-6 work-left">
					<h4>2021 - 2025</h4>
				</div>
				<div class="col-md-6 work-right">
					<h5><span class="glyphicon glyphicon-education"> </span>中山大学</h5>
					<p></p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info">
				<div class="col-md-6 work-right work-right2">
					<h4>2012-2021</h4>
				</div>
				<div class="col-md-6 work-left work-left2">
					<h5>北京师范大学<span class="glyphicon glyphicon-education"></span></h5>
					<p></p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info">
				<div class="col-md-6 work-left">
					<h4>2009-2012</h4>
				</div>
				<div class="col-md-6 work-right">
					<h5><span class="glyphicon glyphicon-education"> </span>绵阳师范大学</h5>
					<p></p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--skills-->
	<div id="skills" class="skills">
		<div class="container">
			<h3 class="title">自我评价专业技能树</h3>
			<div class="skills-info">
				<div class="col-md-3 bar-grids">
					<h6 data-myNum="1">前端: PhotoShop <span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="2">前端: HTML 5<span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6 data-myNum="3">前端: CSS<span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6 data-myNum="4">前端: Sass<span>了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="5">前端: Less<span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>
					<h6 data-myNum="6">前端: Stylus<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="7">前端: JavaScript<span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6 data-myNum="8">前端: Es6+<span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>
					<h6 data-myNum="9">前端: CoffeeScript<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="10">前端: TypeScript<span>了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="11">前端: JqueryJs<span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
				</div>
				<div class="col-md-3 bar-grids">
                    <h6 data-myNum="12">前端: BootstrapJs<span> 熟练 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 75%">
                        </div>
                    </div>
                    <h6 data-myNum="13">前端: AngularJs<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="14">前端: ReactJs<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="15">前端: VueJs<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="16">前端: jTopoJs<span> 熟练 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 75%">
                        </div>
                    </div>
                    <h6 data-myNum="17">前端: EchartsJs<span> 熟悉 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 50%">
                        </div>
                    </div>
                    <h6 data-myNum="18">前端: D3jS<span> 熟悉 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 50%">
                        </div>
                    </div>
                    <h6 data-myNum="19">前端: 微信小程序<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
					<h6 data-myNum="20">php: Symfony<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="21">php: Drupal<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="22">php: WordPress<span>了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
				</div>
				<div class="col-md-3 bar-grids">
                    <h6 data-myNum="23">php: Zend Framework<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="24">php：Laravel<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="25">php: Magento<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="26">php: Joomla<span>了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="27">php: CakePHP<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="28">php: Yii<span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
					<h6 data-myNum="29">Java: Java基础 <span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6 data-myNum="30">Java: Java高级<span> 熟练 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6 data-myNum="31">Java: Spring <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="32">Java: SpringMVC <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="33">Java: Mybatis <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
				</div>
				<div class="col-md-3 bar-grids">
                    <h6 data-myNum="34">Java: Springboot<span> 熟悉 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="35">Java: SpringCloud <span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
					<h6 data-myNum="36">数据库: MySql <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>
					<h6 data-myNum="37">数据库: Oracle <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>
					<h6 data-myNum="38">数据库: SqlServer <span> 熟悉 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>
					<h6 data-myNum="39">数据库: Redis<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
					<h6 data-myNum="40">数据库: MongoDB<span> 了解 </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 25%">
						</div>
					</div>
                    <h6 data-myNum="41">Linux <span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
                    <h6 data-myNum="42">代码管理: SVN <span> 熟练 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 75%">
                        </div>
                    </div>
                    <h6 data-myNum="43">代码管理: Git<span> 熟练 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 75%">
                        </div>
                    </div>
                    <h6 data-myNum="44">Linux <span> 了解 </span></h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" style="width: 25%">
                        </div>
                    </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--portfolio-->
	<div id="projects" class="portfolio">
		<div class="container">
			<h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">部分作品</h3>
			<div class="sap_tabs">
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s">
						<li class="resp-tab-item"><span>CSS</span></li>
						<li class="resp-tab-item"><span>JavaScript</span></li>
						<li class="resp-tab-item"><span>Jquery</span></li>
						<li class="resp-tab-item"><span>Java</span></li>
					</ul>
					<div class="clearfix"> </div>
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content" data-mytip="CSS">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/CSS3Object/flexIndex"  target="_blank"
										   title="flexIndex是利用CSS的flex技术做的一个index demo">
											<img src="images/css1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span>flexIndex</span></h3>
												<p>利用CSS的flex技术做的一个index demo</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/CSS3Object/3dRotating_album"  target="_blank"
										   title="利用CSS3新特性实现css3d旋转相册小demo">
											<img src="images/css2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> 3dRotating_album</span></h3>
												<p>利用CSS3新特性实现css3d旋转相册小demo</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/CSS3Object/cssPageSmoothing"  target="_blank"
										   title="利用CSS3新特性实现点击页面平滑的效果">
											<img src="images/css3.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> cssPageSmoothing</span></h3>
												<p>利用CSS3新特性实现点击页面平滑的效果</p>
											</div>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" data-mytip="JavaScript">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javascriptObject/canvas_rain"  target="_blank"
										   title="利用原生JS以及原生CANVAS实现类似下雨的动画">
											<img src="images/JS1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> canvas_rain</span></h3>
												<p>利用原生JS以及原生CANVAS实现类似下雨的动画</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javascriptObject/chooseName"  target="_blank"
										   title="利用原生JS以及ES6实现随机点名的功能">
											<img src="images/JS2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> chooseName</span></h3>
												<p>利用原生JS以及ES6实现随机点名的功能</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javascriptObject/weibo"  target="_blank"
										   title="利用JS以及ES6和H5的新特性实现类似发表微博的功能">
											<img src="images/JS3.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> weibo</span></h3>
												<p>利用JS以及ES6和H5的新特性实现类似发表微博的功能</p>
											</div>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" data-mytip="Jquery">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/jQueryObject/tanMu"  target="_blank"
										   title="利用Jquery实现直播视频弹幕demo">
											<img src="images/Jquery1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> tanMu</span></h3>
												<p>利用Jquery实现直播视频弹幕demo</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/jQueryObject/chief_Counsel"  target="_blank"
										   title="利用Jquery以及CSS3实现首席律师小项目">
											<img src="images/Jquery2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> chief_Counsel</span></h3>
												<p>利用Jquery以及CSS3实现首席律师小项目</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/jQueryObject/piano_player"  target="_blank"
										   title="利用Jquery和H5新特性实现弹钢琴的小demo">
											<img src="images/Jquery3.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> piano_player</span></h3>
												<p>利用Jquery和H5新特性实现弹钢琴的小demo</p>
											</div>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" data-mytip="Java">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javaobjects/my12306_2"  target="_blank"
										   title="实现12306的一小部分功能">
											<img src="images/Java1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> 12306</span></h3>
												<p>实现12306的一小部分功能</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javaobjects/ipm_boot"  target="_blank"
										   title="企业级网络流量监控，数据分析，拓扑梳理">
											<img src="images/Java2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>XPM<span>全栈性能管理与流量分析平台</span></h3>
												<p>企业项目，企业级网络流量监控，数据分析，拓扑梳理</p>
											</div>
										</a>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://github.com/javaobjects/TSMCP"  target="_blank"
										   title="企业级网络流量监控，数据分析，拓扑梳理">
											<img src="images/tsmcp.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>腾讯<span>智能制造云平台</span></h3>
												<p>腾讯智能制造云平台</p>
											</div>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--//portfolio-->
	<!--contact -->
	<div class="welcome contact" id="contact">
		<div class="container">
			<h3 class="title">联系我</h3>
			<div class="contact-row">
				<div class="col-md-6 contact-left">
					<iframe src="http://map.baidu.com/#panoid=09002200011706171137054909Z&panotype=street&heading=0&pitch=0&l=19&tn=B_NORMAL_MAP&sc=0&newmap=1&shareurl=1&pid=09002200011706171137054909Z"></iframe>
				</div>
				<div class="col-md-6 contact-right">
					<div class="address-left">
						<p>北京朝阳区赵九路风景线,中国 </p>
					</div>
					<div class="address-right">
						<p>电话 : 152****4216</p>
<!--						<p>E-mail : <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=OwoLDg0MAwgIDgJ7SkoVWFRW" target="_blank">fm185@sina.com</a></p>-->
						<p>E-mail :511****69@qq.com</a></p>
					</div>
					<div class="clearfix"></div>
					<div class="contact-form">
						<form action="#" method="post">
							<input type="text" name="Name" placeholder="Name" required="">
							<input class="email" name="Email" type="text" placeholder="Email" required="">
							<input class="phone" name="phone" type="text" placeholder="Phone" required="">
							<textarea name="Message" placeholder="Message" required=""></textarea>
							<input type="submit" value="提交" >
						</form>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//contact -->
	<div class="footer">
		<div class="container">
			<p>©2022我的简历。所有权利保留|设计的</p>
		</div>
	</div>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/move-top.js"></script>
	<script src="js/easing.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/easyResponsiveTabs.js"></script>
	<script src="js/jquery.swipebox.min.js"></script>
	<script>
		$(function () {
			/**
			 * ResponsiveTabs
			 */
			$('#horizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion
				width: 'auto', //auto or any width like 600px
				fit: true   // 100% fit in a container
			});
			/**
			 * swipe box js
			 */
			$(".swipebox").swipebox();

			/**
			 * smooth-scrolling-of-move-up
			 * @type {
			 * {
			 * easingType: string,
			 * containerHoverID: string,
			 * scrollSpeed: number,
			 * containerID: string
			 * }
			 * }
			 */
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};
			$().UItoTop({ easingType: 'easeOutQuart' });
		})
	</script>
	</body>
</html>
